<template>
  <div class="dialog-header">
    <div class="header-icon" :class="`header-icon-${type}`">
      <el-icon><component :is="icon" /></el-icon>
    </div>
    <div class="header-content">
      <h3>{{ title }}</h3>
      <p v-if="description">{{ description }}</p>
    </div>
  </div>
</template>

<script setup>
defineProps({
  icon: {
    type: [String, Object],
    required: true
  },
  title: {
    type: String,
    required: true
  },
  description: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'primary', // primary | success | warning | danger | info
    validator: (val) => ['primary', 'success', 'warning', 'danger', 'info'].includes(val)
  }
})
</script>

<style scoped>
/* 样式已在 dialog-system.css 中统一定义 */
</style>

